<%@ page language="java" contentType="text/html; charset=UTF-8"
         import="org.apache.commons.lang3.StringUtils"
         pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> 
    <style type="text/css">
      #container,html,body{
        height: 100%;
      }
      .color{
          width:5rem;
          height:0.6rem;
          display:inline-block;
          margin:0 1rem;
      }
      .info{
          min-width:10rem;
      }
      .amap-marker:hover{
          z-index:9999 !important;
      }
    </style>
    <title>轨迹</title>
  </head>
<body>
<div id="container"></div>
<div class="mileage-card" style="position: absolute;top: 15px;right: 15px;width: 410px;height: 120px;">
    <input type="hidden" value="${requestScope.startLocation}" id="startLocation">
    <input type="hidden" value="${requestScope.endLocation}" id="endLocation">
    <input type="hidden" value="${requestScope.ChangePositionTime}" id="changePositionTime">
    <%
        String orderChannel = request.getAttribute("orderChannel").toString();
        /*2.5.0需求   ccec渠道展示项中   实际里程 更新为 导航里程；修订里程 更新为 技师填写里程*/
        /*3.1.0需求   ccec渠道展示项中
          时间最快计划里程更新为出发点到故障点的时间最快里程
         距离最短计划里程更新为故障点到终点的时间最快里程
         技师填写里程更新为  +=出发点到报修点+报修点到到达点=总值   -=出发点到报修点-报修点到到达点=值*/
        if("109".equals(orderChannel)){%>
    <%
        /*
            <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">
                出发点-报修点:<span>${requestScope.startToRepariFastestDistance}</span>
            </div>
            <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">
                报修点-到达点:<span>${requestScope.repariToEndFastestDistance}</span>
            </div>
             <div style="width: 410px;height: 40px;text-align: left;font-size: 20px;font-weight:bold;">
                    <span style="font-size: 30px;font-weight: 700">①+②=</span><span>${requestScope.oneAddTwoDistance}</span>
             </div>
             <div style="width: 410px;height: 40px;text-align: left;font-size: 20px;font-weight:bold;">
                    <span style="font-size: 30px;font-weight: 700">①-②=</span><span>${requestScope.oneMinusTwoDistance}</span>
             </div>
        */
    %>
    <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">
            出发点-报修点-到达点:<span>${requestScope.oneAddTwoDistance}</span>
    </div>
    <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">
            导航里程:<span>${requestScope.RealDistance}</span>
    </div>
        <%}else{%>
            <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">计划里程:<span>${requestScope.GuessDistance}</span></div>
            <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">实际里程:<span>${requestScope.RealDistance}</span></div>
            <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">修订里程:<span>${requestScope.AdjustDistance}</span></div>
       <%}%>

     <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">服务车车牌号:<span>${requestScope.serviceCarNo}</span></div>
     
    	 <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">出发时间:<span>${requestScope.outTime}</span></div>
     
     	 <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">到达时间:<span>${requestScope.arrivedTime}</span></div>
     
    <%if(!"109".equals(orderChannel)){%>
         <c:if test="${mainTechnician != null and mainTechnician.size() > 0}">
             <c:forEach items="${mainTechnician}" var="name">
                <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">主技师姓名:<span>${name}</span></div>
             </c:forEach>
         </c:if>
         <c:if test="${mainTechnician == null or mainTechnician.size() <= 0}">
            <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">主技师姓名:</div>
         </c:if>

         <c:if test="${secondaryTechnician != null and secondaryTechnician.size() > 0}">
             <c:forEach items="${secondaryTechnician}" var="name">
                <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">副技师姓名:<span>${name}</span></div>
             </c:forEach>
         </c:if>
         <c:if test="${secondaryTechnician == null or secondaryTechnician.size() <= 0}">
                <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">副技师姓名:</div>
         </c:if>
     <%}%>
     
     
     	 <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">出发手机串号:</div>
     <c:if test="${requestScope.outIMEI != ''}">
    	 <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;"><span>${requestScope.outIMEI}</span></div>
     </c:if>
     
         <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;">到达手机串号:</div>
     <c:if test="${requestScope.arrivedIMEI != ''}">
         <div style="width: 410px;height: 30px;text-align: left;font-size: 20px;font-weight:bold;"><span>${requestScope.arrivedIMEI}</span></div>
     </c:if>
    
    
</div>
<%--<div id="container" tabindex="0"></div>--%>
   <div class="input-card" style="width:200px;">
    <h4>轨迹回放控制</h4>
    <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" style="margin-right:30px;" onclick="startAnimation()"/>
        <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
    </div>
    <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" style="margin-right:30px;" onclick="resumeAnimation()"/>
        <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
    </div>
  </div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=56ed45b6b29f1156ac924687687cab05&plugin=AMap.GraspRoad"></script>
<script type="text/javascript">
		<%  
		String result = request.getAttribute("result").toString();
		String channel = request.getAttribute("orderChannel").toString();


		String gpsData = "";
		String ngpsData = "";
		String gpsStartData = "";
		String startEndArr ="";
		String orderStatus="";
		String arrivedData = "";
		
		if(!"0".equals(result)){
			gpsData = "[]";
			gpsStartData = "[]";
			%>alert("未查询到相关工单轨迹！");<%
		}else{
			gpsData = request.getAttribute("gpsData").toString();
			ngpsData = request.getAttribute("ngpsData").toString();
			gpsStartData = request.getAttribute("gpsStartData").toString();
			startEndArr = request.getAttribute("startEndArr").toString();
			orderStatus = request.getAttribute("orderStatus").toString();
			if(request.getAttribute("arrived") == null){
				arrivedData = null;
			}else{
				arrivedData = request.getAttribute("arrived").toString();
			}
			
		}%>
        var map = new AMap.Map('container', {
              resizeEnable: true
        });
        
        var graspRoad;
        var pathParam = <%=gpsData%>;
        
        var arrivedParam = [];
        <%
            if(StringUtils.isNotEmpty(arrivedData)){
         %>
            arrivedParam = <%=arrivedData%>;
        <%
            }
        %>
        
        var path1 = [];
        for(var i=0;i<pathParam.length;i+=1){
          path1.push([pathParam[i].x,pathParam[i].y])
        }
        var startEnd = [];
        <% if(StringUtils.isNotEmpty(startEndArr)){%>
        startEnd = <%=startEndArr%>;
        <% } %>
        var orderStatus = <%=orderStatus%>;
        if(startEnd[2] != 0.0 && startEnd[3] != 0.0){
         var oldLine = new AMap.Polyline({
            path:path1,
            strokeWeight:8,
            strokeOpacity:0.8,
            strokeColor:'red'
          });

          map.add(oldLine);
        }
          
         if(arrivedParam){
          var pathT1 = [];
          for(var i=0;i<arrivedParam.length;i+=1){
        	  pathT1.push([arrivedParam[i].x,arrivedParam[i].y])
            }

          var oldLineT1 = new AMap.Polyline({
              path:pathT1,
              strokeWeight:8,
              strokeOpacity:0.8,
              strokeColor:'blue'
            });
            map.add(oldLineT1);
         }
	
        if(!graspRoad) {
            graspRoad = new AMap.GraspRoad();
        }
       var path2 = [];

        <% if(StringUtils.isNotEmpty(ngpsData)){%>
            var newPathParam = <%=ngpsData%>;
        <% }else{%>
            var newPathParam = [];
        <%  }%>

        graspRoad.driving(newPathParam,function(error,result){
          if(!error){
            var newPath = result.data.points;
            for(var i =0;i<newPath.length;i+=1){
              path2.push([newPath[i].x,newPath[i].y])
            }
            var newLine = new AMap.Polyline({
              path:path2,
              strokeWeight:8,
              strokeOpacity:0.8,
              strokeColor:'#0091ea',
              showDir:true
            });
            map.add(newLine);
            map.setFitView();
          }
        });

        
        marker = new AMap.Marker({
        map: map,
        position: <%=gpsStartData%>,
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle:-90
    });

        
    <!-- 绘制轨迹 -->
   var polyline = new AMap.Polyline({
        map: map,
        path: path2,
        showDir:true,
        strokeColor: "#ccc",
        strokeWeight: 6
    });

    var passedPolyline = new AMap.Polyline({
        map: map,
        path: path2,
        strokeColor: "#AF5",
        strokeWeight: 6
    }); 
 

    marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
    });

    map.setFitView();

    function startAnimation () {
        marker.moveAlong(path2, 200);
    }

    function pauseAnimation () {
        marker.pauseMove();
    }

    function resumeAnimation () {
        marker.resumeMove();
    }

    function stopAnimation () {
        marker.stopMove();
    }


        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(135, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(-9, -3)
        });


        // 将 icon 传入 marker
        var startMarker = new AMap.Marker({
            position: new AMap.LngLat(startEnd[0],startEnd[1]),
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
        });

        //2.9.0需求   出发和到达点增加文字描述
        var startLocation = document.getElementById("startLocation").value;
        var endLocation = document.getElementById("endLocation").value;
        var changePositionTime = document.getElementById("changePositionTime").value;
        startMarker.setLabel({
            offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
            content: "<b>" + startLocation + "</b>", //设置文本标注内容
            direction: 'center' //设置文本标注方位
        });
        // 创建一个 icon
        var endIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            //image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            image: './img/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-95, -3)
        });

        // 将 icon 传入 marker
        var endMarker = new AMap.Marker({
            position: new AMap.LngLat(startEnd[2],startEnd[3]),
            icon: endIcon,
            offset: new AMap.Pixel(-13, -30)
        });

        endMarker.setLabel({
            offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
            content: "<b>" + endLocation + "</b>", //设置文本标注内容
            direction: 'center' //设置文本标注方位
        });
        var markerContent = '';
        if(changePositionTime == ''){
            markerContent = '<div class="custom-content-marker">' +
                '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
                '   <div class="content-text" >故</div>' +
                '</div>';
        } else  {
            markerContent = '<div class="custom-content-marker">' +
                '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
                '   <div class="content-text" >旧</div>' +
                '</div>';
        }

        var faultMarker = new AMap.Marker({
            position: new AMap.LngLat(startEnd[4], startEnd[5]),
            content: markerContent,
            offset: new AMap.Pixel(-13, -30)
        });
        faultMarker.setTitle('我是故障地点');

         <%if("109".equals(channel)){%>
                         var changeContent = '' +
                                            '<div class="custom-content-marker">' +
                                            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
                                            '   <div class="content-text" >新</div>' +
                                            '</div>';
                         var changeMarker = new AMap.Marker({
                                            position: new AMap.LngLat(startEnd[6], startEnd[7]),
                                            content: changeContent,
                                            offset: new AMap.Pixel(-20, -15)
                                 });

                         changeMarker.setLabel({
                                             offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
                                             content: "我是新故障点", //设置文本标注内容
                                             direction: 'center' //设置文本标注方位
                                         });

                         changeMarker.setTitle('我是新故障点坐标');

                                 var currentContent = '' +
                                                     '<div class="custom-content-marker">' +
                                                     '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
                                                     '   <div class="content-text" >改</div>' +
                                                     '</div>';
                                 var currentMarker = new AMap.Marker({
                                                     position: new AMap.LngLat(startEnd[8], startEnd[9]),
                                                     content: currentContent,
                                                     offset: new AMap.Pixel(-10, -20)
                                 });

                                 currentMarker.setLabel({
                                                      offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
                                                      content: changePositionTime+" 更改报修点", //设置文本标注内容
                                                      direction: 'center' //设置文本标注方位
                                                  });
                                 currentMarker.setTitle('我是变更故障点时的位置坐标');
                         // 将 markers 添加到地图
                      var dian = [];
                      dian.push(startMarker);
                      dian.push(faultMarker);
                      if(startEnd[2] != 0.0 && startEnd[3] != 0.0) {
                          dian.push(endMarker);
                      }
                      if(null != startEnd[6] && startEnd[6] != 0.0 && null != startEnd[7] && startEnd[7] != 0.0 ) {
                          dian.push(changeMarker);
                      }
                      if(null != startEnd[8] && startEnd[8] != 0.0 && null != startEnd[9] && startEnd[9] != 0.0 ) {
                          dian.push(currentMarker);
                      }
                     map.add(dian);
         <%}else{%>
                if(startEnd[2] != 0.0 && startEnd[3] != 0.0) {
                        map.add([startMarker, endMarker,faultMarker]);
                } else {
                    map.add([startMarker, faultMarker]);
                }
         <%}%>
 </script>
<style>
    .custom-content-marker {
        position: relative;
    }

    .custom-content-marker img {
        width: 25px;
        height: 34px;
    }

    .custom-content-marker .content-text {
        position: absolute;
        left: 7px;
        top: 2px;
        color: white;
    }
</style>
</body>
</html>